import 'package:flutter/material.dart';
import 'package:fzcgx_app/common/adapter_utils.dart';
import 'package:fzcgx_app/common/assets_utils.dart';
import 'package:fzcgx_app/provider/provider_widget.dart';
import 'package:fzcgx_app/ui/base/base_view_model.dart';
import 'package:fzcgx_app/ui/my/factory/model/factory_environment_model.dart';
import 'package:fzcgx_app/ui/my/factory/view_model/factory_environment_view_model.dart';
import 'package:fzcgx_app/ui/widget/custom_appbar_widget.dart';

class FactoryEnvironmentPage extends StatefulWidget {
   FactoryEnvironmentPage({Key key,this.callback}) : super(key: key);
  final Function callback;
  @override
  _FactoryEnvironmentPageState createState() => _FactoryEnvironmentPageState();
}

class _FactoryEnvironmentPageState extends State<FactoryEnvironmentPage> {
  FactoryEnvironmentViewModel viewModel;
  @override
  void initState() {
    viewModel = FactoryEnvironmentViewModel();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: CustomAppbar(
        title: '工厂环境',
        actions: <Widget>[
          InkWell(
              onTap: () {
                showDialog<Null>(
                  context: context,
                  builder: (BuildContext context) {
                    return Dialog(
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(15)),
                        child: Container(
                          height: AdapterUtils.screenHeight() / 2 - 35,
                          padding: EdgeInsets.all(15),
                          child: Column(
                            children: <Widget>[
                              Text(
                                '新增工厂部门分类',
                                style: TextStyle(
                                  fontSize: AdapterUtils.getSp(16),
                                  color: Color(0xff3B4859),
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              SizedBox(
                                height: AdapterUtils.getHeight(37),
                              ),
                              Container(
                                decoration: BoxDecoration(
                                    border: Border(
                                        bottom: BorderSide(
                                            color: Color(0xffE8E9ED),
                                            width: 1))),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    RichText(
                                      text: TextSpan(children: <InlineSpan>[
                                        TextSpan(
                                            text: '部门分类名称',
                                            style: TextStyle(
                                              fontSize: AdapterUtils.getSp(14),
                                              color: Color(0xff606B79),
                                              fontWeight: FontWeight.w500,
                                            )),
                                        TextSpan(
                                            text: '',
                                            style: TextStyle(
                                              fontSize: AdapterUtils.getSp(14),
                                              color: Color(0xffFF1515),
                                              fontWeight: FontWeight.w500,
                                            )),
                                      ]),
                                    ),
                                    TextField(
                                       controller: viewModel.nameController,

                                      style: TextStyle(
                                        fontSize: AdapterUtils.getSp(18),
                                        color: Color(0xff3B4859),
                                        fontWeight: FontWeight.w500,
                                      ),
                                      decoration: InputDecoration(
                                          contentPadding: EdgeInsets.only(
                                              top: AdapterUtils.getHeight(10),
                                              bottom:
                                                  AdapterUtils.getHeight(20)),
                                          hintText: '请输入',
                                          border: InputBorder.none,
                                          hintStyle: TextStyle(
                                            fontSize: AdapterUtils.getSp(18),
                                            color: Color(0xffD7D8DB),
                                            fontWeight: FontWeight.w500,
                                          )),
                                    )
                                  ],
                                ),
                              ),
                              SizedBox(
                                height: AdapterUtils.getHeight(35),
                              ),
                              Container(
                                  width: AdapterUtils.screenWidth(),
                                  height: AdapterUtils.getHeight(50),
                                  child: FlatButton(
                                      onPressed: () {
                                         viewModel.addDepartApi(context);
                                      },
                                      disabledColor:
                                          Color(0xff15A1FF).withAlpha(80),
                                      color: Color(0xff15A1FF),
                                      shape: RoundedRectangleBorder(
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(4)),
                                      ),
                                      child: Text(
                                        '确认新增',
                                        style: TextStyle(
                                          fontSize: AdapterUtils.getSp(16),
                                          color: Colors.white,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ))),
                            ],
                          ),
                        ));
                  },
                ).then((val) {
                  print(val);
                });
              },
              child: Container(
                alignment: Alignment.centerRight,
                margin: EdgeInsets.only(right: AdapterUtils.getWidth(15)),
                child: Text(
                  '新增',
                  style: TextStyle(
                    fontSize: AdapterUtils.getSp(16),
                    color: Color(0xff15A1FF),
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ))
        ],
      ),
      body: SafeArea(
        child: ProviderWidget<FactoryEnvironmentViewModel>(
          model: viewModel,
          onReady: (viewModel) {
            viewModel.requestApi();
          },
          builder: (context, viewModel, child) {
            return viewModel.state==ViewState.Success?_buildSuccessWidget(viewModel):Container();
          },
        ),
      ),
    );
  }

  Widget _buildSuccessWidget(FactoryEnvironmentViewModel viewModel) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          SizedBox(
            height: AdapterUtils.getHeight(4),
          ),
          Container(
            height: AdapterUtils.getHeight(38),
            color: Color(0xffEAF7FE),
            child: Center(
              child: Text(
                '注册填写/上传的信息越全面，客户信任度越高',
                style: TextStyle(
                  fontSize: AdapterUtils.getSp(13),
                  color: Color(0xff15A1FF),
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
          ListView.builder(
            primary: false,
            shrinkWrap: true,
              itemCount: viewModel.models.length,
              itemBuilder: (BuildContext context, int index) {
                return _buildImagesWidget(viewModel.models[index]);
              }),
              Container(
                          width: AdapterUtils.screenWidth(),
                          height: AdapterUtils.getHeight(50),
                          margin: EdgeInsets.all(15),
                          child: FlatButton(
                              onPressed: () {
                                   viewModel.postApi(context,widget.callback);
                              },
                              disabledColor: Color(0xff15A1FF).withAlpha(80),
                              color: Color(0xff15A1FF),
                              shape: RoundedRectangleBorder(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(4)),
                              ),
                              child: Text(
                                '保存',
                                style: TextStyle(
                                  fontSize: AdapterUtils.getSp(16),
                                  color: Colors.white,
                                  fontWeight: FontWeight.w500,
                                ),
                              ))),
        ],
      ),
    );
  }

  Widget _buildImagesWidget(FactoryEnvironmentModel model) {
    return Container(
      decoration: BoxDecoration(
          border:
              Border(bottom: BorderSide(color: Color(0xffE8E9ED), width: 1))),
      margin: EdgeInsets.only(left: AdapterUtils.getWidth(15),right: AdapterUtils.getWidth(15),top: AdapterUtils.getHeight(20)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          RichText(
            text: TextSpan(children: <InlineSpan>[
              TextSpan(
                  text: model.name,
                  style: TextStyle(
                    fontSize: AdapterUtils.getSp(14),
                    color: Color(0xff606B79),
                    fontWeight: FontWeight.w500,
                  )),
              TextSpan(
                  text: '',
                  style: TextStyle(
                    fontSize: AdapterUtils.getSp(14),
                    color: Color(0xffFF1515),
                    fontWeight: FontWeight.w500,
                  )),
            ]),
          ),
          Container(
            height: AdapterUtils.getHeight(160),
            padding: EdgeInsets.only(
                top: AdapterUtils.getHeight(20),
                bottom: AdapterUtils.getHeight(25)),
            child: Row(
              children: <Widget>[
                model.imgs.length == 0
                    ? InkWell(
                        onTap: () {
                           viewModel.selectPhoto(context,model);
                        },
                        child: Container(
                          child: Stack(
                            children: <Widget>[
                              AspectRatio(
                                  aspectRatio: 1.0,
                                  child: Image.asset(
                                      AssetsUtils.getAssetsImagesPath(
                                          'upload.png'),
                                      fit: BoxFit.cover)),
                              Positioned(
                                  bottom: AdapterUtils.getHeight(17),
                                  child: Container(
                                    alignment: Alignment.center,
                                    width: AdapterUtils.getWidth(108),
                                    child: RichText(
                                      text: TextSpan(children: <InlineSpan>[
                                        TextSpan(
                                            text: '上传图片（',
                                            style: TextStyle(
                                              fontSize: AdapterUtils.getSp(12),
                                              color: Color(0xff99A2AD),
                                              fontWeight: FontWeight.w500,
                                            )),
                                        TextSpan(
                                            text: model.imgs.length.toString(),
                                            style: TextStyle(
                                              fontSize: AdapterUtils.getSp(12),
                                              color: Color(0xff15A1FF),
                                              fontWeight: FontWeight.w500,
                                            )),
                                        TextSpan(
                                            text: '/3）',
                                            style: TextStyle(
                                              fontSize: AdapterUtils.getSp(12),
                                              color: Color(0xff99A2AD),
                                              fontWeight: FontWeight.w500,
                                            )),
                                      ]),
                                    ),
                                  ))
                            ],
                          ),
                        ),
                      )
                    //第一张图片
                    : Container(
                        child: Stack(
                          children: <Widget>[
                            AspectRatio(
                                aspectRatio: 1.0,
                                child: Image.network(
                                  model.imgs[0],
                                  fit: BoxFit.cover,
                                )),
                            Positioned(
                                right: AdapterUtils.getWidth(6),
                                top: AdapterUtils.getHeight(6),
                                child: InkWell(
                                  onTap: () {
                                     viewModel.delPhoto(context,model,model.imgs[0],);
                                  },
                                  child: Container(
                                    alignment: Alignment.center,
                                    width: AdapterUtils.getWidth(24),
                                    height: AdapterUtils.getHeight(24),
                                   
                                    decoration: BoxDecoration(
                                        color: Colors.black.withAlpha(400),
                                        borderRadius: BorderRadius.all(
                                            Radius.circular(12))),
                                    child: Icon(
                                      Icons.close,
                                      color: Colors.white,
                                      size: 16,
                                    ),
                                  ),
                                ))
                          ],
                        ),
                      ),
                SizedBox(
                  width: AdapterUtils.getWidth(10),
                ),
                model.imgs.length == 0
                    ? Container()
                    : model.imgs.length == 1
                        ? InkWell(
                            onTap: () {
                               viewModel.selectPhoto(context,model);
                            },
                            child: Container(
                              child: Stack(
                                children: <Widget>[
                                  AspectRatio(
                                      aspectRatio: 1.0,
                                      child: Image.asset(
                                          AssetsUtils.getAssetsImagesPath(
                                              'upload.png'),
                                          fit: BoxFit.cover)),
                                  Positioned(
                                      bottom: AdapterUtils.getHeight(17),
                                      child: Container(
                                        alignment: Alignment.center,
                                        width: AdapterUtils.getWidth(108),
                                        child: RichText(
                                          text: TextSpan(children: <InlineSpan>[
                                            TextSpan(
                                                text: '上传图片（',
                                                style: TextStyle(
                                                  fontSize:
                                                      AdapterUtils.getSp(12),
                                                  color: Color(0xff99A2AD),
                                                  fontWeight: FontWeight.w500,
                                                )),
                                            TextSpan(
                                                text: model.imgs.length
                                                    .toString(),
                                                style: TextStyle(
                                                  fontSize:
                                                      AdapterUtils.getSp(12),
                                                  color: Color(0xff15A1FF),
                                                  fontWeight: FontWeight.w500,
                                                )),
                                            TextSpan(
                                                text: '/3）',
                                                style: TextStyle(
                                                  fontSize:
                                                      AdapterUtils.getSp(12),
                                                  color: Color(0xff99A2AD),
                                                  fontWeight: FontWeight.w500,
                                                )),
                                          ]),
                                        ),
                                      ))
                                ],
                              ),
                            ),
                          )
                        //第二张图片
                        : Container(
                            child: Stack(
                              children: <Widget>[
                                AspectRatio(
                                    aspectRatio: 1.0,
                                    child: Image.network(
                                      model.imgs[1],
                                      fit: BoxFit.cover,
                                    )),
                                Positioned(
                                    right: AdapterUtils.getWidth(6),
                                    top: AdapterUtils.getHeight(6),
                                    child: InkWell(
                                      onTap: () {
                                       viewModel.delPhoto(context,model,model.imgs[1],);
                                      },
                                      child: Container(
                                        width: AdapterUtils.getWidth(24),
                                        height: AdapterUtils.getHeight(24),
                                        decoration: BoxDecoration(
                                            color: Colors.black.withAlpha(400),
                                            borderRadius: BorderRadius.all(
                                                Radius.circular(12))),
                                        child: Icon(
                                          Icons.close,
                                          color: Colors.white,
                                           size: 16,
                                        ),
                                      ),
                                    ))
                              ],
                            ),
                          ),
                SizedBox(
                  width: AdapterUtils.getWidth(10),
                ),
                model.imgs.length == 0
                    ? Container()
                    : model.imgs.length == 1
                        ? Container()
                        : model.imgs.length == 2
                            ? InkWell(
                                onTap: () {
                                  viewModel.selectPhoto(context,model);
                                },
                                child: Container(
                                  child: Stack(
                                    children: <Widget>[
                                      AspectRatio(
                                          aspectRatio: 1.0,
                                          child: Image.asset(
                                            AssetsUtils.getAssetsImagesPath(
                                                'upload.png'),
                                            fit: BoxFit.cover,
                                          )),
                                      Positioned(
                                          bottom: AdapterUtils.getHeight(17),
                                          child: Container(
                                            alignment: Alignment.center,
                                            width: AdapterUtils.getWidth(108),
                                            child: RichText(
                                              text: TextSpan(children: <
                                                  InlineSpan>[
                                                TextSpan(
                                                    text: '上传图片（',
                                                    style: TextStyle(
                                                      fontSize:
                                                          AdapterUtils.getSp(
                                                              12),
                                                      color: Color(0xff99A2AD),
                                                      fontWeight:
                                                          FontWeight.w500,
                                                    )),
                                                TextSpan(
                                                    text: model.imgs.length
                                                        .toString(),
                                                    style: TextStyle(
                                                      fontSize:
                                                          AdapterUtils.getSp(
                                                              12),
                                                      color: Color(0xff15A1FF),
                                                      fontWeight:
                                                          FontWeight.w500,
                                                    )),
                                                TextSpan(
                                                    text: '/3）',
                                                    style: TextStyle(
                                                      fontSize:
                                                          AdapterUtils.getSp(
                                                              12),
                                                      color: Color(0xff99A2AD),
                                                      fontWeight:
                                                          FontWeight.w500,
                                                    )),
                                              ]),
                                            ),
                                          ))
                                    ],
                                  ),
                                ),
                              )
                            //第三张图片
                            : Container(
                                child: Stack(
                                  children: <Widget>[
                                    AspectRatio(
                                        aspectRatio: 1.0,
                                        child: Image.network(
                                          model.imgs[2],
                                          fit: BoxFit.cover,
                                        )),
                                    Positioned(
                                        right: AdapterUtils.getWidth(6),
                                        top: AdapterUtils.getHeight(6),
                                        child: InkWell(
                                          onTap: () {
                                           viewModel.delPhoto(context,model,model.imgs[2],);
                                          },
                                          child: Container(
                                            width: AdapterUtils.getWidth(24),
                                            height: AdapterUtils.getHeight(24),
                                            decoration: BoxDecoration(
                                                color:
                                                    Colors.black.withAlpha(400),
                                                borderRadius: BorderRadius.all(
                                                    Radius.circular(12))),
                                            child: Icon(
                                              Icons.close,
                                              color: Colors.white,
                                               size: 16,
                                            ),
                                          ),
                                        ))
                                  ],
                                ),
                              ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
